<template>
  <div class="market-detail">
    <market-header :asset="asset" @refresh="refresh" watch rate share></market-header>
    <el-tabs v-model="activeTab" @tab-click="changeTab">
      <el-tab-pane label="总览" name="overview">
        <overview ref="overview" :assetId="asset.assetId" @toggleWatch="toggleWatch"></overview>
      </el-tab-pane>
      <el-tab-pane label="评价详情" name="albumrate">
        <album-rate ref="albumrate" :assetId="asset.assetId"></album-rate>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import marketHeader from '../components/market-header'
import overview from './album-overview'
import albumRate from './album-rate'
export default {
  components: {
    marketHeader,
    overview,
    albumRate
  },
  data() {
    return {
      asset: {
        assetName: '',
        assetId: '',
        assetType: 3
      },
      activeTab: 'overview'
    }
  },
  created() {
    this.asset.assetId = this.$route.params.id
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.$ajax({
        url: this.$ajax.setUrl(`ast/astAlbumDetails/getDetail/${this.asset.assetId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.asset.assetName = data.data.albumNm
          this.$refs.overview.getInfo(data.data)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    changeTab(tab) {
      if (tab.name === 'overview') this.getInfo()
      else this.$refs[tab.name].getInfo()
    },
    toggleWatch(isWatch) {
      this.isWatch = isWatch
    },
    refresh() {
      if (this.activeTab === 'overview') this.getInfo()
    }
  }
}
</script>

<style lang="scss">
@import '../market-detail';
</style>
